<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <title>Document</title>
    <style>
      body {
        background: #333;
        color: #b7b7b7;
        font-family: "微软雅黑";
        font-size: 16px;
        font-weight: 700;
      }

      .code {
        position: fixed;
        left: 20%;
        top: 35px;
        width: 500px;
        height: 400px;
        margin-left: 200px;
        overflow: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding-bottom: 30px;
      }
      .code::-webkit-scrollbar {
        display: none;
      }
      * {
        margin: 0;
        padding: 0;
      }

      .page {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        top: 50px;
        left: 50px;
        height: 400px;
      }
    </style>
    <style id="dingdang_style"></style>
  </head>

  <body>
    <!-- page节点是为了提供定位，main使用定位和overflow之后，
		会时其子节点也会受到遮挡影响，因此使用一个父节点来让电脑定位 -->
    <div class="page">
      <div class="main">
        <div class="main-top top1"></div>
        <!-- 机器猫开始 -->
        <div class="block">
          <!-- 白脸 -->
          <div class="white-face">
            <div class="blue-patch"></div>
          </div>
          <!-- 眼睛 -->
          <div class="eye-left">
            <div class="eye-left-line1"></div>
            <div class="eye-left-ball">
              <div class="eye-left-ball-center"></div>
            </div>
            <div class="eye-left-line2">
              <div class="left-line2-patch"></div>
            </div>
            <div class="eye-glass-left">
              <div class="eye-glass-left-bling1"></div>
              <div class="eye-glass-left-bling2"></div>
            </div>
          </div>
          <div class="eye-right">
            <div class="eye-right-line1">
              <div class="right-line1-patch1"></div>
              <div class="right-line1-patch2"></div>
            </div>
            <div class="eye-right-line2">
              <!-- 这条线太难写了，用个问号代替吧~ -->
              <div class="right-line2-l">
                ?
                <div class="right-line2-l-patch"></div>
              </div>
              <div class="right-line2-r">
                <div class="right-line2-r-patch"></div>
              </div>
              <!-- <div class="right-line2-patch"></div> -->
            </div>
            <div class="eye-right-left-bottom-patch"></div>
            <div class="eye-right-left-bottom-line">
              <!-- 精修 -->
              <div class="left-bottom-line-patch1"></div>
              <div class="left-bottom-line-patch2"></div>
              <div class="left-bottom-line-patch3"></div>
            </div>
            <div class="eye-right-ball">
              <!-- 左边眼睛上bulingbuling的闪光 -->
              <div class="eye-right-ball-center"></div>
              <div class="eye-right-ball-patch"></div>
            </div>
            <div class="eye-glass-right">
              <!-- 右边眼睛上bulingbuling的闪光 -->
              <div class="eye-glass-left-bling1"></div>
              <div class="eye-glass-left-bling2"></div>
            </div>
          </div>
          <!-- 鼻子 -->
          <div class="nose">
            <div class="nose-center"></div>
          </div>
          <!-- 嘴巴 -->
          <div class="mouth1">(</div>
          <div class="mouth2">
            <div class="mouth2-left">(</div>
            <div class="mouth2-middum"></div>
            <div class="mouth2-right">)</div>
          </div>
          <!-- 胡子 -->
          <div class="beard-left1"></div>
          <div class="beard-left2"></div>
          <div class="beard-left3"></div>
          <div class="beard-right1"></div>
          <div class="beard-right2"></div>
          <div class="beard-right3"></div>
          <!-- 项圈 -->
          <div class="necklace-line-top"></div>
          <div class="necklace"></div>
          <div class="necklace-line-bottom"></div>
          <!-- 铃铛 -->
          <div class="bell">
            <div class="bell-line"></div>
          </div>

          <!-- 胳膊 -->
          <div class="arm-left">
            <div class="hand-left"></div>
          </div>
          <!-- 身子 -->
          <div class="dingdang-body">
            <div class="desk-patch">
              <!-- 键盘之所以写在小叮当身体上是因为不用调整层级了 -->
              <!-- 键盘 -->
              <div class="keyboard">
                <!-- 按键 -->
                <div class="keyboard-row1"></div>
                <div class="keyboard-row2"></div>
                <div class="keyboard-row3"></div>
                <div class="keyboard-row4"></div>
                <div class="keyboard-row5"></div>
                <div class="keyboard-row6"></div>
                <div class="keyboard-col1"></div>
                <div class="keyboard-col2"></div>
                <div class="keyboard-col3"></div>
                <div class="keyboard-col4"></div>
                <div class="keyboard-col5"></div>
                <div class="keyboard-col6"></div>
                <div class="keyboard-col7"></div>
                <div class="keyboard-col8"></div>
                <div class="keyboard-col9"></div>
                <!-- 三个指示灯 -->
                <div class="keyboard-dot dot1"></div>
                <div class="keyboard-dot dot2"></div>
                <div class="keyboard-dot dot3"></div>
                <!-- 我用的是无线键盘，不需要电源线 -->
                <!-- 其实是不想写了hhh=== -->
              </div>
            </div>
          </div>
          <!-- 右胳膊 -->
          <div class="arm-right">
            <div class="arm-right-top"></div>
            <div class="arm-right-bottom"></div>
            <div class="hand-right"></div>
          </div>
        </div>
        <!-- 桌子 -->
        <div class="desk">
          <!-- 水杯 -->
          <div class="cup">
            <!-- 杯底 -->
            <div class="cup-bottom"></div>
            <!-- 杯身 -->
            <div class="cup-body"></div>
            <!-- 杯顶 -->
            <div class="cup-top"></div>
            <!-- 杯子里边的水底 -->
            <div class="cup-inner-bottom"></div>
            <!-- 杯子里水的两边 -->
            <div class="cup-inner-body"></div>
            <!-- 杯子里水顶 -->
            <div class="cup-inner-top"></div>
          </div>
          <div class="mouse-pad">
            <div class="mouse"></div>
          </div>
        </div>
        <!-- 光照 -->
        <div class="light"></div>
      </div>
      <!-- 电脑写在外层，解决main节点超出隐藏的限制 -->
      <div class="computer">
        <div class="computer-inner"></div>
        <div class="lamp-box">
          <div class="lamp lamp1"></div>
          <div class="lamp lamp2"></div>
          <div class="lamp lamp3"></div>
        </div>
        <div class="computer-line1"></div>
        <div class="computer-line2"></div>
        <div class="computer-line3"></div>
        <div class="computer-line4"></div>
      </div>
    </div>
    <pre class="code"></pre>
    <script>
      const str = `
	/*
	*
	*
	==========================
	+					     +
	+   学丁老师画小猪佩奇      +
	+    我画一个机器猫        +
	+                        +
	==========================	
	*
	*
	*/
		/* 
		================>
		画框开始 
		================>
		*/
		.main {
			position: relative;
			width: 350px;
			height: 350px;
			border-radius: 10px;
			border: 8px solid #773f27;
			overflow: hidden;
			/* background-color如果要和backdrop-filter一起使用的话，要用rgba */
			background-color: rgba(108, 125, 177, 0.9);
			backdrop-filter: blur(8px) brightness(6.5) contrast(0.7);
		}

		.main-top {
			width: 350px;
			height: 8px;
			background-color: #773f27;
		}
		/* 
		================>
		调整一下画框上边的样式 
		================>
		*/
		.main-top.top1 {
			border-radius: 0% 0% 50% 50%/0% 0% 100% 100%;
		}
		/* 
		================>
		哆啦A梦绘画开始
		================>
		*/
		.block {
			position: absolute;
			top: 70px;
			left: 117px;
			width: 200px;
			height: 175px;
			border-radius: 50% 50% 30% 35% / 55% 55% 45% 45%;
			background-color: #91c6e4;
			border: 4px solid #6d3924;
			z-index: 1;
		}
		/* 
		================>
		嘴巴样式 
		================>
		*/
		.mouth {
			position: absolute;
			width: 180px;
			height: 100px;
			top: 110px;
			left: 70px;
			border-bottom: 4px solid #6d3924;
			border-radius: 50%;
			transform: rotate(-5deg);
		}
		/* 
		================>
		头上的白脸 
		================>
		*/
		.white-face {
			position: absolute;
			width: 142px;
			height: 117px;
			border: 3px #6d3924 solid;
			background-color: #fff;
			/* border-radius: 29% 95% 14% 116% / 58% 77% 35% 63%; */
			border-radius: 36% 93% 27% 93% / 68% 76% 57% 63%;
			bottom: -19px;
			left: 24px;
			transform: rotate(-17deg);
			z-index: 2;
		}
		/* 
		================>
		左眼样式 
		================>
		*/
		.eye-left {
			position: absolute;
			top: 58px;
			left: 33px;
			width: 38px;
			height: 52px;
			border-radius: 89px 98px 90px 64px / 122px 150px 74px 132px;
			border: 3px solid #6d3924;
			background-color: #fff;
			z-index: 4;
		}
		/* 
		================>
		右眼样式 
		================>
		*/
		.eye-right {
			position: absolute;
			top: 56px;
			left: 80px;
			width: 41px;
			height: 52px;
			border-radius: 89px 98px 90px 64px / 122px 150px 74px 132px;
			border: 3px solid #6d3924;
			background-color: #fff;
			z-index: 4;
		}
		/* 
		================>
		蓝色补丁，盖住其他颜色 
		================>
		*/
		.blue-patch {
			position: absolute;
			width: 31px;
			height: 29px;
			top: -6px;
			left: 43px;
			background-color: #91c6e4;
			z-index: 3;
		}
		/* 
		================>
		左眼下眼皮样式 
		================>
		*/
		.eye-left-line1 {
			position: absolute;
			width: 42px;
			height: 10px;
			top: 26px;
			left: -2px;
			border-bottom: 3px solid #6d3924;
			border-radius: 50%;
		}
		/* 
		================>
		左眼上眼皮样式 
		================>
		*/
		.eye-left-line2 {
			position: absolute;
			width: 38px;
			height: 8px;
			top: 14px;
			left: -6px;
			border: 3px solid #6d3924;
			border-radius: 50%;
			background-color: #fff;
		}
		
		.left-line2-patch {
			position: absolute;
			width: 34px;
			height: 13px;
			top: -6px;
			left: 4px;
			border-radius: 50%;
			background-color: #fff;
			z-index: 5;
		}
		/* 
		================>
		左眼眼球样式 
		================>
		*/
		.eye-left-ball {
			position: absolute;
			top: 26px;
			left: 9px;
			width: 15px;
			height: 10px;
			border-radius: 4px;
			background-color: #6d3924;
		}

		.eye-left-ball-center {
			position: absolute;
			top: 3px;
			left: 3px;
			width: 6px;
			height: 4px;
			border-radius: 2px;
			background-color: #fff;
		}
		/* 
		================>
		右眼下眼皮样式 
		================>
		*/
		.eye-right-line1 {
			position: absolute;
			width: 57px;
			height: 10px;
			top: 26px;
			left: -9px;
			border-bottom: 3px solid #6d3924;
			border-radius: 50%;
		}

		.right-line1-patch1 {
			position: absolute;
			left: 3px;
			top: 7px;
			width: 4px;
			height: 5px;
			background-color: #91c6e4;
		}

		.right-line1-patch2 {
			position: absolute;
			right: -3px;
			top: 7px;
			width: 7px;
			height: 5px;
			background-color: #fff;
		}
		/* 
		================>
		右眼上眼皮样式 
		================>
		*/
		.eye-right-line2 {
			position: absolute;
			width: 16px;
			height: 8px;
			top: 14px;
			left: -7px;
			/* border: 3px solid #6d3924;
			border-radius: 50%; */
			/* background-color: #fff; */
		}
		/* 
		================>
		上眼皮的拐弯不好写，就用个问号?代替 
		================>
		*/
		.right-line2-l {
			position: absolute;
			top: -11px;
			left: 3px;
			font-size: 24px;
			color: #6d3924;
			/* transform: rotateX(180deg); */
			/* transform: rotateY(180deg); */
			transform: rotateX(31deg) rotateZ(-94deg) scaleX(-1);
		}

		.right-line2-patch {
			position: absolute;
			top: 2px;
			left: 2px;
			width: 10px;
			height: 10px;
			background-color: #fff;
		}

		.right-line2-r {
			position: absolute;
			width: 44px;
			height: 13px;
			top: -1px;
			left: 5px;
			border-top: 3px solid #6d3924;
			border-radius: 50%;
			transform: rotate(-15deg);
		}

		.right-line2-l-patch {
			position: absolute;
			top: 11px;
			left: 4px;
			width: 4px;
			height: 6px;
			background-color: #fff;
			transform: rotate(23deg);
		}

		.right-line2-r-patch {
			position: absolute;
			top: 1px;
			left: 10px;
			width: 5px;
			height: 5px;
			background-color: #fff;
		}

		.eye-right-left-bottom-patch {
			position: absolute;
			top: 25px;
			left: -3px;
			width: 4px;
			height: 10px;
			background-color: #91c6e4;
		}

		.eye-right-left-bottom-line {
			position: absolute;
			top: -15px;
			left: -1px;
			width: 14px;
			height: 80px;
			border-radius: 50%;
			transform: rotate(-2deg) scaleY(0.3);
			border: 3px solid #6d3924;
		}

		.left-bottom-line-patch1 {
			position: absolute;
			top: -3px;
			left: -1px;
			width: 10px;
			height: 6px;
			background-color: #fff;
			transform: rotate(-56deg);
		}

		.left-bottom-line-patch2 {
			position: absolute;
			top: 8px;
			left: 11px;
			width: 6px;
			height: 59px;
			background-color: #fff;
		}

		.left-bottom-line-patch3 {
			position: absolute;
			bottom: -6px;
			left: 2px;
			width: 10px;
			height: 10px;
			background-color: #fff;
		}
		/* 
		================>
		右眼珠样式 
		================>
		*/
		.eye-right-ball {
			position: absolute;
			top: 20px;
			left: 8px;
			width: 15px;
			height: 26px;
			background-color: #6d3924;
			transform: rotate(158deg);
			border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
		}

		.eye-right-ball-center {
			position: absolute;
			top: 16px;
			left: 5px;
			width: 7px;
			height: 7px;
			background-color: #fff;
			border-radius: 40%;
		}

		.eye-right-ball-patch {
			position: absolute;
			top: -1px;
			left: 1px;
			width: 18px;
			height: 8px;
			background-color: #fff;
			transform: rotate(20deg);
		}
		/* 
		================>
		鼻子样式 
		================>
		*/
		.nose {
			position: absolute;
			top: 99px;
			left: 69px;
			width: 17px;
			height: 15px;
			background-color: #f38566;
			border-radius: 50%;
			border: 3px solid #6d3924;
			z-index: 5;
		}

		.nose-center {
			position: absolute;
			top: 2px;
			left: 3px;
			width: 8px;
			height: 7px;
			background-color: #fff;
			opacity: 0.6;
			border-radius: 50%;
			transform: rotate(-20deg);
		}
		/* 
		================>
		左眼镜样式 
		================>
		*/
		.eye-glass-left {
			position: absolute;
			bottom: -8px;
			left: -11px;
			width: 36px;
			height: 14px;
			border: 3px solid #6d3924;
			background-color: #e5f5ff;
			border-radius: 8px;
		}
		/* 
		================>
		左眼镜片上的闪光 
		================>
		*/
		.eye-glass-left-bling1 {
			position: absolute;
			top: 0px;
			left: 8px;
			width: 10px;
			height: 14px;
			transform: skew(-30deg);
			background-color: #fff;
		}

		.eye-glass-left-bling2 {
			position: absolute;
			top: 0px;
			left: 22px;
			width: 4px;
			height: 14px;
			transform: skew(-30deg);
			background-color: #fff;
		}
		/* 
		================>
		右眼镜样式 
		================>
		*/
		.eye-glass-right {
			position: absolute;
			bottom: -8px;
			right: -11px;
			width: 36px;
			height: 14px;
			border: 3px solid #6d3924;
			background-color: #e5f5ff;
			border-radius: 8px;
			transform: rotate(-3deg);
		}
		/* 
		================>
		右眼镜上的闪光 
		================>
		*/
		.eye-glass-right-bling1 {
			position: absolute;
			top: 0px;
			left: 8px;
			width: 10px;
			height: 14px;
			transform: skew(-30deg);
			background-color: #fff;
		}

		.eye-glass-right-bling2 {
			position: absolute;
			top: 0px;
			left: 22px;
			width: 4px;
			height: 14px;
			transform: skew(-30deg);
			background-color: #fff;
		}
		/* 
		================>
		竖着的嘴巴，用了一个括号( 
		================>
		*/
		.mouth1 {
			position: absolute;
			top: 119px;
			left: 78px;
			font-size: 23px;
			color: #6d3924;
			z-index: 5;
			transform: scaleY(1.5) rotate(-11deg);
		}
		/* 
		================>
		横着的嘴巴，用了一个左括号和右括号 
		================>
		*/
		.mouth2 {
			position: absolute;
			top: 140px;
			left: 48px;
			width: 94px;
			height: 20px;
			z-index: 5;
		}

		.mouth2-left {
			position: absolute;
			top: -8px;
			left: 2px;
			transform: scaleX(1.5) rotate(-55deg);
			font-size: 25px;
			color: #6d3924;
		}

		.mouth2-middum {
			position: absolute;
			top: 9px;
			left: 14px;
			width: 60px;
			height: 3px;
			background-color: #6d3924;
			transform: rotate(-8deg);
		}

		.mouth2-right {
			position: absolute;
			top: -8px;
			left: 77px;
			font-size: 23px;
			color: #6d3924;
			transform: rotate(-75deg);
		}
		/* 
		================>
		左边三根胡子 
		================>
		*/
		.beard-left1 {
			position: absolute;
			top: 95px;
			left: 5px;
			width: 27px;
			height: 7px;
			border-radius: 50%;
			background: transparent;
			border-bottom: 2px solid #6d3924;
			transform: rotate(203deg);
			z-index: 5;

		}

		.beard-left2 {
			position: absolute;
			top: 105px;
			left: 2px;
			width: 27px;
			height: 7px;
			border-radius: 50%;
			background: transparent;
			border-bottom: 2px solid #6d3924;
			transform: rotate(203deg);
			z-index: 5;

		}

		.beard-left3 {
			position: absolute;
			top: 114px;
			left: 7px;
			width: 19px;
			height: 7px;
			border-radius: 50%;
			background: transparent;
			border-bottom: 2px solid #6d3924;
			transform: rotate(194deg);
			z-index: 5;
		}
		/* 
		================>
		右边三根胡子 
		================>
		*/
		.beard-right1 {
			position: absolute;
			top: 82px;
			left: 129px;
			width: 48px;
			height: 11px;
			border-radius: 50%;
			background: transparent;
			z-index: 5;
			border-bottom: 2px solid #6d3924;
			transform: rotate(157deg);
		}

		.beard-right2 {
			position: absolute;
			top: 93px;
			left: 138px;
			width: 41px;
			height: 11px;
			border-radius: 50%;
			background: transparent;
			z-index: 5;
			border-bottom: 2px solid #6d3924;
			transform: rotate(167deg);
		}

		.beard-right3 {
			position: absolute;
			top: 106px;
			left: 141px;
			width: 41px;
			height: 11px;
			border-radius: 50%;
			background: transparent;
			z-index: 5;
			border-bottom: 2px solid #6d3924;
			transform: rotate(180deg);
		}
		/* 
		================>
		项圈 
		================>
		*/
		.necklace {
			position: absolute;
			top: 138px;
			left: 47px;
			width: 125px;
			height: 51px;
			border-radius: 50%;
			background: transparent;
			z-index: 5;
			border-bottom: 13px solid #f07865;
			transform: rotate(-5deg);
		}

		.necklace-line-top {
			position: absolute;
			top: 136px;
			left: 41px;
			width: 136px;
			height: 51px;
			border-radius: 50%;
			background: transparent;
			border-bottom: 3px solid #6d3924;
			transform: rotate(-5deg);
			z-index: 5;
		}

		.necklace-line-bottom {
			position: absolute;
			top: 150px;
			left: 51px;
			width: 118px;
			height: 51px;
			border-radius: 50%;
			background: transparent;
			border-bottom: 5px solid #6d3924;
			transform: rotate(-5deg);
			z-index: 5;
		}
		/* 
		================>
		铃铛 
		================>
		*/
		.bell {
			width: 20px;
			height: 20px;
			background: #e7c938;
			border-radius: 50%;
			position: absolute;
			left: 46%;
			margin-left: -13px;
			bottom: -40px;
			border: 2px solid #6d3924;
			transition: all 1s ease-in-out;
			z-index: 5;
		}

		.bell:before {
			content: '';
			width: 19px;
			height: 2px;
			background: #6d3924;
			border-radius: 10px;
			position: absolute;
			left: 23%;
			margin-left: -4px;
			top: 7px;
			z-index: 5;
		}

		.bell:after {
			content: '';
			width: 5px;
			height: 5px;
			background: #6d3924;
			border-radius: 50%;
			position: absolute;
			left: 57%;
			margin-left: -4px;
			bottom: 4px;
		}


		.bell-line {
			width: 2px;
			height: 4px;
			background: #6d3924;
			position: absolute;
			left: 50%;
			margin-left: -1px;
			bottom: 0;
		}
		/* 
		================>
		左胳膊 
		================>
		*/
		.arm-left {
			position: absolute;
			top: 169px;
			left: -3px;
			width: 50px;
			height: 20px;
			border-radius: 50%;
			border: 3px solid #6d3924;
			background-color: #91c6e4;
			transform: rotate(-13deg);
			transform-origin: right;
			z-index: 6;
		}
		/* 
		================>
		左手 
		================>
		*/
		.hand-left {
			position: absolute;
			top: -4px;
			left: -3px;
			width: 27px;
			height: 26px;
			border-radius: 50%;
			background-color: #fff;
			border: 3px solid #6d3924;
		}
		/* 
		================>
		哆啦A梦的身体 
		================>
		*/
		.dingdang-body {
			position: absolute;
			top: 167px;
			right: -32px;
			width: 149px;
			height: 62px;
			background-color: #91c6e4;
			border-radius: 100%;
			border-top: 3px solid #6d3924;
			transform: rotate(60deg);
		}
		/* 
		================>
		右胳膊 
		================>
		*/
		.arm-right {
			position: absolute;
			top: 175px;
			right: 35px;
			width: 62px;
			height: 21px;
			border-bottom: 20px solid #91c6e4;
			background-color: transparent;
			z-index: 5;
			transform: rotate(-10deg);
			transform-origin: right;
		}

		.arm-right-top {
			position: absolute;
			top: 19px;
			left: 1px;
			background-color: transparent;
			border-top: 3px solid#6d3924;
			width: 62px;
			height: 10px;
			border-radius: 50%;
			transform: rotate(2deg);
		}

		.arm-right-bottom {
			position: absolute;
			top: 30px;
			left: 6px;
			background-color: transparent;
			border-bottom: 3px solid#6d3924;
			width: 62px;
			height: 10px;
			border-radius: 50%;
			transform: rotate(2deg);
		}
		/* 
		================>
		右手 
		================>
		*/
		.hand-right {
			position: absolute;
			top: 14px;
			left: -12px;
			background-color: #fff;
			width: 27px;
			height: 26px;
			border: 3px solid #6d3924;
			border-radius: 50%;
		}
		/* 
		================>
		小桌子 
		================>
		*/
		.desk {
			position: relative;
			width: 400px;
			height: 200px;
			border: 3px solid #6d3924;
			background-color: #fff;
			transform: rotate(15deg);
			margin-top: 245px;
			margin-left: -52px;
		}

		.desk-patch {
			position: absolute;
			right: -10px;
			top: 20px;
			width: 100px;
			height: 51px;
			border-top: 3px solid #6d3924;
			background-color: #fff;
			transform: rotate(-45deg);
		}
		/* 
		================>
		键盘 
		================>
		*/
		.keyboard {
			position: absolute;
			top: 12px;
			left: -132px;
			width: 132px;
			height: 50px;
			border: 3px solid #6d3924;
			background-color: #efded8;
			transform: rotate(-2deg) skew(-40deg);
			border-radius: 10px;
		}
		/* 
		================>
		用一些横线和竖线组成按键 
		================>
		*/
		.keyboard-row1 {
			position: absolute;
			top: 42px;
			left: 8px;
			width: 112px;
			height: 2px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-row2 {
			position: absolute;
			top: 34px;
			left: 10px;
			width: 112px;
			height: 2px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-row3 {
			position: absolute;
			top: 26px;
			left: 9px;
			width: 112px;
			height: 2px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-row4 {
			position: absolute;
			top: 19px;
			left: 9px;
			width: 112px;
			height: 2px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-row5 {
			position: absolute;
			top: 12px;
			left: 10px;
			width: 112px;
			height: 2px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-row6 {
			position: absolute;
			top: 5px;
			left: 10px;
			width: 112px;
			height: 2px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col1 {
			position: absolute;
			top: -1px;
			left: 8px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col2 {
			position: absolute;
			top: -1px;
			left: 22px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col3 {
			position: absolute;
			top: -1px;
			left: 36px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col4 {
			position: absolute;
			top: 7px;
			left: 50px;
			width: 2px;
			height: 36px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col5 {
			position: absolute;
			top: 7px;
			left: 64px;
			width: 2px;
			height: 36px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col6 {
			position: absolute;
			top: -1px;
			left: 78px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col7 {
			position: absolute;
			top: -1px;
			left: 92px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col8 {
			position: absolute;
			top: -1px;
			left: 106px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}

		.keyboard-col9 {
			position: absolute;
			top: -1px;
			left: 120px;
			width: 2px;
			height: 45px;
			background-color: #b09b9d;
			transform: rotate(0deg);
		}
		/* 
		================>
		键盘上的三个指示灯 
		================>
		*/
		.keyboard-dot {
			position: absolute;

			width: 3px;
			height: 3px;
			border-radius: 50%;
			background-color: #b1bba4;
		}

		.keyboard-dot.dot1 {
			top: 45px;
			left: 10px;
		}

		.keyboard-dot.dot2 {
			top: 45px;
			left: 16px;
		}

		.keyboard-dot.dot3 {
			top: 45px;
			left: 21px;
		}
		/* 
		================>
		水杯 
		================>
		*/
		.cup {
			position: absolute;
			top: -36px;
			left: 106px;
			width: 32px;
			height: 60px;
			transform: rotate(-17deg);
			z-index: 6;
		}

		.cup-bottom {
			position: absolute;
			bottom: -18px;
			left: 1px;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			border-bottom: 4px solid #6d3924;
			transform: rotateX(55deg);
			background-color: rgba(224, 233, 228, .3);
		}

		.cup-body {
			position: absolute;
			top: 4px;
			left: 1px;
			width: 28px;
			height: 60px;
			border-left: 2px solid #6d3924;
			border-right: 2px solid #6d3924;
			background-color: rgba(224, 233, 228, .3);
			transform: rotateY(-12deg);
		}

		.cup-top {
			position: absolute;
			top: -3px;
			left: 1px;
			width: 28px;
			height: 8px;
			border-radius: 50%;
			border: 2px solid #6d3924;
			background-color: rgba(224, 233, 228, .3);
		}

		.cup-inner-bottom {
			position: absolute;
			top: 45px;
			left: 6px;
			width: 23px;
			height: 25px;
			border-radius: 50%;
			border-bottom: 3px solid #6d3924;
			transform: rotateX(67deg);
			background-color: rgba(224, 233, 228, .7);
		}

		.cup-inner-body {
			position: absolute;
			top: 21px;
			left: 6px;
			width: 20px;
			height: 40px;
			border-left: 1px solid #6d3924;
			border-right: 1px solid #6d3924;
			background-color: rgba(224, 233, 228, .7);
			transform: rotateY(-1deg);
		}

		.cup-inner-top {
			position: absolute;
			top: 16px;
			left: 6px;
			width: 20px;
			height: 6px;
			border-radius: 50%;
			border: 1px solid #6d3924;
			background-color: rgba(224, 233, 228, .7);
		}
		/* 
		================>
		鼠标垫 
		================>
		*/
		.mouse-pad {
			position: absolute;
			top: 16px;
			left: 60px;
			width: 47px;
			height: 49px;
			border-radius: 5px;
			border: 3px solid #6d3924;
			transform: rotate(-2deg) skew(-40deg);
			background-color: #b2c6c7;
		}
		/* 
		================>
		鼠标 
		================>
		*/
		.mouse {
			width: 30px;
			height: 22px;
			border-radius: 50%;
			border: 2px solid #6d3924;
			background-color: #fff;
			margin-top: 7px;
			margin-left: 4px;
			transform: rotateX(12deg);
		}
		/* 
		================>
		电脑 
		================>
		*/
		.computer {
			position: absolute;
			top: 157px;
			left: 9px;
			width: 80px;
			height: 136px;
			border-radius: 3px 20px 20px 3px;
			border: 4px solid #6d3924;
			background-color: #767676;
			z-index: 7;
		}

		.computer-inner {
			position: absolute;
			top: 17px;
			left: 0px;
			width: 60px;
			height: 92px;
			border-radius: 0 18px 19px 0;
			background-color: #4f4f4f;
		}
		/* 
		================>
		电脑上的三个指示灯 
		================>
		*/
		.lamp-box {
			position: absolute;
			left: 0;
			bottom: 2px;
			width: 50px;
			height: 22px;
			background-color: #4f4f4f;
			border-radius: 0 4px 4px 0;
		}

		.lamp {
			position: absolute;
			top: 2px;
			width: 6px;
			height: 18px;
			background-color: #7a3923;
			border-radius: 3px;
		}

		.lamp1 {
			right: 4px;
		}

		.lamp2 {
			right: 14px;
		}

		.lamp3 {
			right: 24px;
		}

		.computer-line1 {
			position: absolute;
			top: 10px;
			left: 0;
			width: 40px;
			height: 2px;
			background-color: #4f4f4f;
			border-radius: 0 2px 2px 0;
		}

		.computer-line2 {
			position: absolute;
			top: 10px;
			right: 9px;
			width: 20px;
			height: 20px;
			background-color: transparent;
			border-radius: 0 20px 0 0;
			border-top: 2px solid #4f4f4f;
			border-right: 2px solid #4f4f4f;
		}

		.computer-line3 {
			position: absolute;
			top: 41px;
			right: 9px;
			width: 2px;
			height: 30px;
			background-color: #4f4f4f;
			border-radius: 2px;
		}

		.computer-line4 {
			position: absolute;
			bottom: 23px;
			right: 10px;
			width: 13px;
			height: 20px;
			background-color: transparent;
			border-radius: 0 0 13px 0;
			border-bottom: 2px solid #4f4f4f;
			border-right: 2px solid #4f4f4f;
		}
		/* 
		================>
		电脑屏幕发出的光 
		================>
		*/
		.light {
			position: absolute;
			top: 103px;
			left: 0;
			width: 211px;
			height: 325px;
			background: radial-gradient(circle at calc(51px) calc(114px), #f9f5ad, rgba(255, 255, 255, 0) 117px);
		}
		/* 
		================>
		敲键盘的动画 
		================>
		*/
		.arm-left.active {
			animation: rockLeft .15s 10;
		}

		.arm-right.active {
			animation: rockRight .15s 10;
			animation-delay: .1s;
		}

		@keyframes rockLeft {
			0% {
				transform: rotate(-13deg);
			}

			50% {
				transform: rotate(10deg);
			}

			100% {
				transform: rotate(-13deg);
			}
		}
		@keyframes rockRight {
			0% {
				transform: rotate(-10deg);
			}

			50% {
				transform: rotate(10deg);
			}

			100% {
				transform: rotate(-10deg);
			}
		}
		
		`;
      var styleBox = document.getElementById("dingdang_style");
      var codeBox = document.getElementsByTagName("pre")[0];
      var leftArm = document.getElementsByClassName("arm-left")[0];
      var rightArm = document.getElementsByClassName("arm-right")[0];
      var count = 0;
      var currStr = "";

      var timer;
      go();
      function go() {
        timer = setInterval(function () {
          if (count == 130) {
            clearInterval(timer);
            count += 30;
            setTimeout(function () {
              go();
            }, 1000);
            return;
          }
          codeBox.scrollTop = codeBox.scrollHeight - codeBox.offsetHeight;
          console.log("str.length=>>" + str.length);
          console.log("currStr.length=>>" + currStr.length);
          if (currStr.length + 10 >= str.length) {
            clearInterval(timer);
            an();
            return;
          }
          currStr += str.substr(count, 30);
          styleBox.innerHTML = currStr;
          codeBox.innerHTML = currStr;
          count += 30;
        }, 500);
      }

      function an() {
        leftArm.classList.add("active");
        rightArm.classList.add("active");
        setTimeout(function () {
          leftArm.classList.remove("active");
          rightArm.classList.remove("active");
        }, 1200);
      }
      // pig.onmouseenter= function(){
      // 	this.classList.add('active');
      // }
      // pig.onmouseleave = function(){
      // 	this.classList.remove('active');
      // }
    </script>
  </body>
</html>
